<template>
  <div class="app-container">
    <!-- 新增的 title 和 line -->
    <div class="title">防护监控</div>
    <div class="line"></div>

    <!-- 原有的表单和表格内容 -->
    <el-table v-loading="loading" :data="overviewList" @selection-change="handleSelectionChange">
      <el-table-column label="攻击记录ID" align="center" prop="attackId" />
      <el-table-column label="攻击源IP" align="center" prop="ipAddress" />
      <el-table-column label="请求次数" align="center" prop="requestCount" />
      <el-table-column label="检测时间" align="center" prop="detectionTime" />
      <el-table-column label="创建时间" align="center" prop="createdTime" />
      <el-table-column label="更新时间" align="center" prop="updatedTime" />
    </el-table>
  </div>
</template>

<script>
import { listOverview } from "@/api/overview/overview"; // 导入 listOverview 方法

export default {
  data() {
    return {
      loading: true, // 初始化 loading 状态
      overviewList: [], // 存储总览数据
    };
  },
  mounted() {
    this.getList(); // 页面创建时调用 getList 方法
  },
  methods: {
    /** 查询总览列表 */
    getList() {
      console.log("请求总览数据...");
      this.loading = true; // 开始加载数据
      listOverview()
        .then(response => {
          console.log("原始数据:", response); // 打印原始数据

          // 格式化日期，确保日期显示为本地时间字符串
          this.overviewList = response.map(item => ({
            attackId: item.attackId,
            ipAddress: item.ipAddress,
            requestCount: item.requestCount,
            detectionTime: new Date(item.detectionTime).toLocaleString(), // 格式化为本地时间
            createdTime: new Date(item.createdTime).toLocaleString(),
            updatedTime: new Date(item.updatedTime).toLocaleString(),
          }));

          console.log("格式化后的数据:", this.overviewList); // 打印格式化后的数据

          this.loading = false; // 数据加载完成后关闭 loading
        })
        .catch(error => {
          console.error("数据请求失败:", error);
          this.loading = false; // 即使请求失败也关闭 loading
        });
    },
  },
};
</script>

<style scoped>
.app-container {
  padding: 20px;
}

.title {
  font-weight: bold;
  font-family: SimSun, '宋体', sans-serif;
  font-size: 30px;
  margin-top: 30px;
  margin-left: 45px;
}

.line {
  margin-top: 20px;
  margin-left: 45px;
  border-top: 1px solid rgb(203, 190, 190);
  width: 96%;
}

.download-btn-container {
  margin-left: 65px;
  margin-top: 100px;
  z-index: 1000;
}

.download-btn {
  background-color: #409EFF;
  color: white;
}
</style>
